<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p v-for="(value, key) in props.row" :key="key" m="t-0 b-2">
            {{ key + ': ' + value }}
          </p>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="ID" prop="id" />
    <el-table-column prop="health" :label="$t('pageInventory.table.health')">
      <template #default="scope">
        <el-tag :type="tagType(scope.row.health)" disable-transitions>{{
          scope.row.health
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      :label="$t('pageInventory.table.locationNumber')"
      prop="locationNumber"
    />
    <el-table-column
      :label="$t('pageInventory.table.identifyLed')"
      prop="identifyLed"
    >
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { usePowerSupplyStore } from '@/store/SystemManagement/SystemInformation/PowerSupplyStore';
import _ from 'lodash';

const powerSupplyStore = usePowerSupplyStore();
powerSupplyStore.getAllPowerSupplies();

const tableData = computed(() => {
  const data = _.cloneDeep(powerSupplyStore.powerSupplies);
  data.map((item: { [x: string]: any }) => {
    Object.keys(item).forEach((key) => {
      if (item[key] === undefined) {
        item[key] = '--';
      }
    });
  });
  return data;
});

const tagType = (val: string) => {
  switch (val) {
    case 'OK':
      return 'success';
    case 'Critical':
      return 'danger';
    case 'Warning':
      return 'warning';
  }
};
</script>
